Parent | Child | Previous | Next
 

Understanding Panels - Panel Layouts, Panel Navigators and Panel Cards

Description

Understanding how Panels work is key to understanding how to build applications for mobile devices.

What are Panels?

Panels are a type of 'container' control that can be placed on the UX Component. Panels are critical to applications for mobile devices (e.g. iPhone, iPad, Android tablets and phones, and Windows 8 tables and phones), but Panels are not limited to applications for mobile devices. You can certainly use Panels in Web applications.

In general, mobile applications are all built using Panels.

There are three types of Panels:

  • Panel Card
  • Panel Navigators
  • Panel Layouts

We will discuss each type of Panel in detail, but briefly:

  • Panel Cards are a container for standard UI controls such as buttons, input fields, lists, charts, lists, etc.
  • Panel Navigators and Panel Lists are container for other Panels (Panel Cards, Navigators and Layouts).

Panel Cards

Panel Cards contain the controls that make up your application.

The simplest mobile application will contain just a single Panel Card.

The standard set of UI controls (button, input fields, lists, etc.) must be placed inside Panel Cards.

If your UX component uses Panels, then you cannot place any UI controls outside Panel Cards.

In the diagram below, you can see a simple Panel card with several input controls and two buttons.

All Panel types (Cards, Navigators and Layouts) can have an optional header and footer. In the diagram below, the Panel Card has a header and footer.

images/panel.png

If your application contains two or more Panel Cards, then you will need a mechanism for displaying multiple Panel Cards at once, or for transitioning between Panel Cards.

The Panel Navigator is the mechanism by which you can transition from one Panel Card to another.

Actually, stated more accurately, the Panel Navigator is a mechanism for transitioning from one Panel to another (not Panel Card), since the transition is not limited to Panel Cards. As we will discuss shortly, a Panel Navigator can contain nested Panel Navigators and Panel Layouts, in addition to nested Panel Cards.

Here is how a Panel Card is represented in the UX builder:

images/panelcardinbuilder.jpg

As you can see the 'tree control' that shows the controls in the UX component has a [Panel Card] begin and [Panel Card] end entry. All items within these two entries are inside the Panel Card.

In the above example, the Panel Card also has a header (indicated by the [PanelHeader] Begin and [PanelHeader] End entries.

Here is how this UX component will render in the iPhone4 mobile simulator:

images/panelCardInSimulator.jpg

Panel Navigator

The Panel Navigator is a mechanism for transitioning from one Panel to another Panel.

The Panel Navigator contains nested Panels.

The nested Panel can be Panel Cards, Panel Layout and Panel Navigators.

In its simplest form, the Panel Navigator contains child Panel Cards.

For example, in the image below you can see a Panel Navigator that contains three child Panel Cards.

The Panel Navigator shows one of its child Panels at a time. In the image below, the Panel Navigator is showing Panel Card 1.

The Panels that are displayed in a Panel Navigator automatically size themselves so that they fill the Panel Navigator window.

images/nav1.png

The Panel Navigator exposes four different ways in which you can transition from one Panel to another. These are:

  • Carousel
  • TabsBands
  • TabButtons
  • Programmatic

  • Carousel Behavior

    When the Panel Navigator is configured to use Carousel style navigation, a swipe gesture with your fingers will transition from one Panel to another.

    In the above image, when the user swipes from right to left on Panel Card 1, the Panel Navigator will transition from displaying Panel Card 1 to Panel Card 2.

    As the user drags on Panel Card 1 it will being to move out of view and Panel Card 2 will begin to move into view. If the user stops dragging before Panel Card 2 is full in view, then one of two possible outcomes will occur:

    • Panel Card 2 will animate fully into view (if the user had dragged Panel Card 2 past a certain threshold)
    • Panel Card 1 will animate back into view (if the user had not dragged Panel Card 2 past a certain threshold)

  • Once Panel Card 2 has come into view, the user can either drag from left-to-right (to bring Panel Card 1 back into view), or from right-to-left, to bring Panel Card 3 into view.

    images/nav2.png

  • Once Panel Card 3 has come into view, if the user swipes from left-to-right on Panel Card 3, then Panel Card 3 will begin to move out of view, but as soon as the user stops the drag gesture, Panel Card 3 will bounce back into full view because there are no additional Panels after Panel Card 3.

  • Loop Navigation

    You can optionally set the 'Loop' property for the Navigator so that when the user swipes from left to right on Panel Card 3, Panel Card 1 will be displayed.

    And, when the user swipes on Panel Card 1 from left-to-right, Panel Card 3 will come into view.

    In other words, the Panels in the Panel Navigator behave as if they are in a continuous loop.

  • Flow Direction

    You can control the 'flow' direction of the Panels in a Panel Navigator. In the above examples, the 'flow' direction is Left-to-Right. The options for the 'Flow' property are:

    LTR

    left-to-right

    RTL

    right-to-left

    TTB

    top-to-bottom

    BTT

    bottom-to-top

  • For example, if the 'flow' property for a Panel Navigator is set to 'TTB' (top-to-bottom), then swiping up on the Panel that is currently visible in the Panel Navigator will bring the next Panel into view.

  • TabButton Behavior

    The Panel Navigator can be configured to operate in 'Tab' mode. In this case, the transition from one Panel to the next is accomplished by clicking on a tab button. Swiping on a Panel card will not transition from one Pane to the next.

    As the image below shows, there is a button for each Panel in the Panel Navigator. Clicking the button will bring the corresponding Panel into view. In this image, button 1 (B1) has been clicked and therefore Panel Card 1 is shown in the Panel Navigator.

    images/nav3.png

  • Next, button 2 (B2) has been clicked and therefore Panel Card 2 is shown in the Panel Navigator.

    images/nav4.png

  • TabBand Behavior

    This option is generally only used in a desktop Web application. The Panels appear like a traditional tab control with a band of tab labels allowing you to select the active Panel Card.

  • Programmatic Behavior

    This option is used when you want to use Javascript code to control which Panel in the Panel Navigator is visible.

    The UX component has a method to programmatically activate the Panel that you want to set focus to.

    For example:

    {dialog.object}.panelSetActive('PANELCARD_2');

Panel Layout

A Panel Layout is a mechanism for displaying two or more Panels at a time.

The Panel that are displayed in a Panel Layout can be any type of Panel (e.g. Panel Layout, Panel Navigator or Panel Card).

The Panels in a Panel Layout are displayed in the specified 'flow' direction.

For example in the image below on the left we have a Panel Layout that contains two Panel Cards. The 'flow' direction is LTR (left-to-right), so Panel Card 2 is show to the right of Panel Card 1.

However, by simply changing the 'flow' property of this Panel Layout to 'TTB' (top-to-bottom), we can change the visual appearance to show Panel Card 2 below Panel Card 1.

Notice that the Panels shown in the Panel Layout automatically size themselves to consume all of the available space.

If the size of the browser window changes (or, in the case of a mobile device, if the device orientation changes), the Panels in the Panel Layout will automatically resize themselves so that they continue to fill the available space.

images/layout1.png

Using Panels to Create Complex Layouts for Web Applications

The New York Times Example

As noted previously, Panels are not just for mobile applications. You can also use Panels in desktop Web application. Once good use of Panel Layouts is to construct complex page layouts.

The New York Times web site is a good example of a complex page layout that can easily be accomplished using Panel Layouts.

If you look at the image below, you will see that the page is divided into several different 'logical' sections.

  • Masthead (i.e. header) - shaded in red
  • Left hand navigation - shaded in blue
  • Center content area - shaded in green
  • Right hand navigation - shaded in yellow
  • Footer - not shown
images/newyorktimes.png

The following structure of Panel Layouts and Panel Cards (which contain the actual content) will duplicate the layout of the New York times site show above:

images/layout7.png

If you view the New York times side in your browser, you will notice that the page has a fixed width and is horizontally centered in the browser window.

This is easily accomplished by wrapping the above structure in another Panel Layout as shown in the image below. The structure of this 'container' Panel Layout is:

Panel Layout 1
    Panel Card 1
    Panel Layout 2 (the Panel Layout shown in the above diagram)
    Panel Card 2

Panel Card 1 and Panel Card 2 are empty - they do not have any controls in them. Their sole purpose is to force Panel Layout 2 to render in the center of the screen. In addition, the widths for Panel Card 1 and Panel Card 2 are set using the 'flex' option. As a result of this, when the browser window is resized, the main layout (Panel Layout 2) remains horizontally centered in the page.

images/layout8.png

Videos

Tutorial Explaining Panel Layouts, Panel Navigators, and Panel Cards

'Panels' are the essential building blocks for mobile applications. The UX Component builder allows you to add three types of panels to your components: Panel Cards, Panel Layouts, and Panel Navigators.

This video is a tutorial explaining the concepts behind Panels.